<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/16
  Time: 18:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上机管理页面</title>

</head>
<body>
<h1 style="font-size: 100px;color: red;text-align: center">上机管理页面<h1>


        <h4 style="font-size: 25px;color: aqua">查看上机信息</h4>
        <table id="employeeTable" border="1px">
            <tr>
                <th>卡号</th>
                <th>上机时间</th>
                <th>下机时间</th>
                <th>费用</th>
                <th>状态</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>110</td>
                <td>2021.12.12 15:30</td>
                <td>2021.12.12 17:30</td>
                <td>10</td>
                <td>已下机</td>
                <td><a href="delete?id=001">删除</a></td>
            </tr>
            <tr>
                <td>120</td>
                <td>2021.10.12 09:30</td>
                <td>2021.10.12 12:30</td>
                <td>15</td>
                <td>已下机</td>
                <td><a href="delete?id=002">删除</a></td>
            </tr>
            <tr>
                <td>130</td>
                <td>2021.11.11 19:30</td>
                <td>2021.11.11 21:30</td>
                <td>15</td>
                <td>已下机</td>
                <td><a href="delete?id=003">删除</a></td>
            </tr>
        </table>


    <div id="time" style="color: red;background-color:royalblue">
        <script type="text/javascript" style="">
            function time(){
                var vWeek,vWeek_s,vDay;
                vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                var date =  new Date();
                year = date.getFullYear();
                month = date.getMonth() + 1;
                day = date.getDate();
                hours = date.getHours();
                minutes = date.getMinutes();
                seconds = date.getSeconds();
                vWeek_s = date.getDay();
                document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] ;

            };
            setInterval("time()",10);

        </script>
    </div>
    <form method="post">
        <center>
            <div id="formBox">
                <h4 style="font-size: 25px;color: aqua">添加上机信息</h4>
                <table id="addEmp">
                    <tr>
                        <td class="word">卡号：</td>
                        <td class="inp">
                            <input type="text" name="empName" id="empName">
                        </td>
                    </tr>

                    <tr>
                        <td class="word">上机时间：</td>
                        <td class="inp">
                            <input type="text" name="email" id="id">
                        </td>
                    </tr>

                    <tr>
                        <td class="word">下机：</td>
                        <td class="inp">
                            <input type="text" name="salary" id="sex">
                        </td>
                    </tr>

                    <tr>
                        <td class="word">费用：</td>
                        <td class="inp">
                            <input type="text" name="salary" id="old">
                        </td>
                    </tr>

                    <tr>
                        <td class="word">状态：</td>
                        <td class="inp">
                            <input type="text" name="salary" id="tel">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" align="center">
                            <input type="button" id="addButton" value="提交">  <input type="reset" value="重置">
                        </td>
                    </tr>
                </table>
            </div>
        </center>
    </form>
    <script>
        function del(){
//获取所有超链接
            var allA = document.getElementsByTagName("a");
            //为每个超链接绑定单击响应函数
            for(var i=0;i<allA.length;i++){
                allA[i].onclick = function(){
                    //获取当前tr
                    var tr = this.parentNode.parentNode;
                    //获取删除对象
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    if(confirm("你确定要删除"+name+"吗?")){
                        tr.parentNode.removeChild(tr);
                    }
                    /* 单机超链接以后，超链接会跳转页面，这是超链接的默认行为，可以在响应函数的最后通过return false来取消默认 */
                    return false;
                }
            }
        }
        var addButton = document.getElementById("addButton");
        addButton.onclick = function(){
            var name = document.getElementById("empName").value;//获取文本框中的内容
            var id = document.getElementById("id").value;
            var sex = document.getElementById("sex").value;
            var old = document.getElementById("old").value;
            var tel = document.getElementById("tel").value;





            var tr = document.createElement("tr");
            tr.innerHTML = "<td>"+name+"</td>"+
                "<td>"+id+"</td>"+
                "<td>"+sex+"</td>"+
                "<td>"+old+"</td>"+
                "<td>"+tel+"</td>"+

                "<td><a href='javascript:;'>删除</a></td>";
            var table = document.getElementById("employeeTable");
            var tbody = table.getElementsByTagName("tbody")[0];//浏览器会默认添加tbody
            tbody.appendChild(tr);
            del();//要再次调用函数,因为如果不调用的话,之前页面加载完,超链接绑定上了函数,然后再添加员工信息时,此时新添加的a就没有绑定上,需要在绑定一次
        }
    </script>




</body>
</html>